<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .is-border {
        border: 1px solid #fa0;
    }

    .el-alert--warning.is-light {
        color: #333;
    }

    .el-alert__title {
        font-size: 14px;
    }

    .p24 {
        padding: 24px;
    }

    .strat-center {
        width: 168px;
        height: 52px;
        border: 1px solid #e0e0e0;
        background: #fff;
        border-radius: 2px;
        padding-right: 8px;
        position: relative;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-left: 4px solid #053dc8;
        cursor: pointer;

    }

    .strat-center .el-input__inner {
        height: 32px;
        line-height: 32px;
    }

    .strat-center:hover {
        border-top: 1px solid #053dc8;
        border-right: 1px solid #053dc8;
        border-bottom: 1px solid #053dc8;
    }

    .el-icon-check {
        color: #7ed322;
    }

    .el-icon-close {
        color: red;
    }

    .edit-icon:hover i {
        color: #053dc8 !important;
    }

    .del-icon:hover i {
        color: red !important;
    }

    .el-popconfirm__main {
        padding: 14px 0;
    }
</style>

<body>
    <div id="app" class="bgc-f2 pl-16 pr-16 pt-16" v-cloak>
        <el-alert title="删除后的分类将不再显示，请谨慎操作。" type="warning" class="is-border">
        </el-alert>
        <div class="ub ub-pe p24 ovh">
            <el-button type="primary" size="small" class="tx-14" @click="addData()">新增收款方式</el-button>
        </div>

        <div class="ub ub-wrap">
            <div class="strat-center ub ub-ac mr-16 mb-16 pl-16" v-for="(item, index) in tableData" :key="item.id">
                <template v-if="item.edit">
                    <div class="ub-f1 ">
                        <el-input v-model="item.name"></el-input>
                    </div>
                    <i class="el-icon-check tx-w cup ml-8" @click="saveData(item)"></i>
                    <div class="el-divider el-divider--vertical ml-4 mr-4"></div>
                    <i class="el-icon-close tx-w cup" @click="delData(item,index,1)"></i>
                </template>
                <template v-else>
                    <div class="ub-f1 ">{{item.name}}</div>
                    <div class="tx-18 tx-99 cup edit-icon">
                        <i class="el-icon-edit" @click="editData(item)"></i>
                    </div>
                    <div class="tx-18 tx-99 ml-8 mr-2 cup  del-icon">
                        <el-popconfirm title="删除后不再显示该项目，确定要删除吗？" @confirm="delData(item,index,2)">
                            <i class="el-icon-delete" slot="reference"></i>
                        </el-popconfirm>
                    </div>

                </template>
            </div>
        </div>
    </div>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    input: "",
                    tableData: [],
                    tableData2: [],
                    userinfo: Pms.getDate("userinfo", {}),
                };
            },
            created() {
                this.init();
            },
            mounted() {
            },
            methods: {
                init() {
                    this.startLoading();
                    this.GET({ url: top.Config.curUrl + "/fae/faeConsumptionType/list", map: this.params }).then((res) => {
                        if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                            res.result.faeConsumptionTypeList.filter(item => item.edit = false)
                            this.tableData = res.result.faeConsumptionTypeList;
                            // 源数据
                            this.tableData2 = JSON.parse(JSON.stringify(res.result.faeConsumptionTypeList))
                        } else { //如果返回码是200则登录成功
                            this.msgError(res.retmsg)
                        }
                        this.closeLoading();
                    })
                },
                addData() {
                    this.tableData.push({
                        htlId: this.userinfo.htlId,
                        name: "",
                        edit: true
                    })
                },
                editData(item) {
                    item.edit = true;
                },
                delData(item, index, type) {
                    // 取消编辑
                    if (type == 1) {
                        if (item.id) {
                            item.edit = false;
                            item.name = this.tableData2.filter(d => d.id == item.id)[0].name;
                        } else {
                            this.tableData.splice(index, 1)
                        }
                    }
                    // 直接删除
                    if (type == 2) {
                        this.POST({ url: top.Config.curUrl + "/fae/faeConsumptionType/del", map: item }).then((res) => {
                            if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                                this.init();
                            } else { //如果返回码是200则登录成功
                                this.msgError(res.retmsg)
                            }
                            this.closeLoading();
                        })
                    }
                },
                saveData(item) {
                    if (!item.name) {
                        this.msgError("请输入名称")
                        return
                    }
                    this.POST({ url: top.Config.curUrl + "/fae/faeConsumptionType/save", map: item }).then((res) => {
                        if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                            this.init();
                        } else { //如果返回码是200则登录成功
                            this.msgError(res.retmsg)
                        }
                    })
                }
            }

        });
    </script>

</body>

</html>